import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaGoogle, FaTwitter, FaFacebookF } from 'react-icons/fa';

const LoginPage: React.FC = () => {
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (username === 'admin' && password === '123456') {
      navigate('/dashboard');
    } else {
      setError('账号或密码错误');
    }
  };

  return (
    <div
      className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500"
      style={{
        backgroundImage: "url('/src/img/C.webp')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <div className="flex w-4/5 max-w-lg bg-white rounded-xl shadow-lg overflow-hidden">
        {/* 左侧 */}
        <div className="flex flex-col justify-center items-center w-1/2 p-12 bg-gradient-to-br from-blue-600 to-blue-400 text-white">
          <h1 className="text-4xl font-bold mb-4 tracking-wide">
            小微企业风险预警系统
          </h1>
          <p className="text-lg mb-8 opacity-90">
            请使用您的企业账号登录
          </p>

          <div className="flex space-x-6">
            <button className="bg-white bg-opacity-20 p-4 rounded-full hover:bg-opacity-40 transition">
              <FaGoogle size={24} />
            </button>
            <button className="bg-white bg-opacity-20 p-4 rounded-full hover:bg-opacity-40 transition">
              <FaTwitter size={24} />
            </button>
            <button className="bg-white bg-opacity-20 p-4 rounded-full hover:bg-opacity-40 transition">
              <FaFacebookF size={24} />
            </button>
          </div>

          <p className="mt-8 text-sm text-blue-100">
            或者使用企业账号登录
          </p>
        </div>

        {/* 右侧 */}
        <div className="flex flex-col justify-center items-center w-1/2 p-10 bg-white">
          <form onSubmit={handleLogin} className="w-full max-w-md">
            <h2 className="text-3xl font-bold text-center text-gray-800 mb-8">
              欢迎回来
            </h2>

            {error && (
              <div className="mb-4 text-red-500 text-sm text-center animate-pulse">
                {error}
              </div>
            )}

            <div className="mb-5">
              <label className="block mb-1 text-gray-600 font-medium">账号</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 focus:outline-none bg-gray-50"
                placeholder="请输入账号"
              />
            </div>

            <div className="mb-5">
              <label className="block mb-1 text-gray-600 font-medium">密码</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 focus:outline-none bg-gray-50"
                placeholder="请输入密码"
              />
            </div>

            <div className="flex justify-between text-sm text-blue-500 mb-6">
              <a href="#" className="hover:underline">
                忘记密码？
              </a>
              <a href="#" className="hover:underline">
                注册账号
              </a>
            </div>

            <button
              type="submit"
              className="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg shadow-md transition-all duration-200"
            >
              登录
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;
